<template>
	<view class="picture" :style="{ backgroundImage: `url(${data.rfs.photo_path})` }">
		<view class="mask"></view>
		<view @click="goBack" class="back">
			<image src="../../static/back.png" mode=""></image>
		</view>
	</view>
	<view class="title">
		<h1>{{data.rfs.title}}</h1>
		<span>精品 <span class="dian">·</span> 独家 <span class="dian">·</span> 浏览 {{data.rfs.views_count_text}} <span
				class="dian">·</span> 收藏 {{data.rfs.vc}}</span>
	</view>
	<view class="user">
		<view class="portrait">
			<image :src="data.rfs.user.avatar_medium"></image>
		</view>
		<view class="user-middle">
			<view class="one-row">
				<h4>{{data.rfs.user.nickname}}</h4>
				<i>LV.{{data.rfs.user.lvl}}</i>
			</view>
		</view>
		<view class="attention-btn">
			关注
		</view>
	</view>
	<view class="cookstory">
		<p>{{data.rfs.cookstory}}</p>
	</view>
	<view class="food-list">
		<h4>食材清单</h4>
		<view class="list">
			<ul>
				<li v-for="(item,index) in data.rfs.major" :key="index">
					<span>{{item.title}}</span>
					<span class="note">{{item.note}}</span>
				</li>
			</ul>
		</view>
	</view>
	<view class="step-box">
		<h4>烹饪步骤</h4>
		<view class="icon" v-for="(icon,index) in data.rfs.cookstep" :key="index">
			<view class="step">
				步骤<span>{{icon.position}}/{{data.rfs.cookstep.length}}</span>
			</view>
			<view class="thumb">
				<image :src="icon.thumb" mode=""></image>
			</view>
			<view class="content">
				{{icon.content}}
			</view>
			
		</view>
	</view>
	<view class="time">
		发布于 {{data.rfs.create_time}}
	</view>
	<view class="send-box">
		<view class="send-btn">
			<view class="send-icon">
				<image src="../../static/camera.png" mode=""></image>
			</view>
			<span>传学做</span>
		</view>
	</view>
	
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		useRoute
	} from 'vue-router';

	const route = useRoute();
	const data = reactive({
		rfs: []
	})

	onMounted(() => {
		const itemId = route.query.itemId;
		fetchItemData(itemId);
	});


	const fetchItemData = (id) => {
		uni.request({
			url: `https://apis.netstart.cn/douguo/recipe/detail/${id}`,
			success: (res) => {
				console.log('菜谱列表', res);
				data.rfs = res.data.result.recipe
				console.log(data.rfs);
			}
		});
	};


	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss">
	.picture {
		width: 100%;
		height: 330px;
		// background-color: palegoldenrod;
		background-size: 100% 100%;
		background-position: cover;
		position: relative;
		margin-top: 20px;

		.mask {
			width: 100%;
			height: 60px;
			/* 100%高，可以根据需要调整 */
			background: linear-gradient(to bottom, rgba(38, 38, 38, 1.0), rgba(0, 0, 0, 0));
		}

		.back {
			background-color: transparent;
			width: 24px;
			height: 26px;
			position: absolute;
			top: 30px;
			left: 16px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.title {
		width: 100%;
		// background-color: palegoldenrod;
		padding: 10px 12px;

		h1 {
			font-size: 20px;
			font-family: "微软雅黑";
		}

		span {
			font-size: 12px;
			color: #717171;
			margin-top: 4px;

			.dian {
				font-weight: bold;
				padding: 0 2px;
			}
		}

	}

	.user {
		width: 100%;
		height: 74px;
		// background-color: peachpuff;
		display: flex;
		align-items: center;
		padding: 0 12px;

		.portrait {
			width: 35px;
			height: 33px;
			border-radius: 50%;

			// background-color: lawngreen;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.user-middle {
			width: 245px;
			height: 35px;
			margin-left: 8px;
			// background-color: paleturquoise;

			.one-row {
				display: flex;

				h4 {
					font-family: "微软雅黑";
					margin-top: 7px;
					color: #2a2a2a;
					font-size: 14px;
				}

				i {
					color: #cba53d;
					font-size: 10px;
					margin-top: 9px;
					margin-left: 4px;
					font-weight: bold;
				}
			}
		}

		.attention-btn {
			width: 66px;
			height: 28px;
			line-height: 30px;
			text-align: center;
			font-size: 13px;
			font-weight: bold;
			border-radius: 30px;
			background-color: #ffc533;
		}

	}

	.cookstory {
		// background-color: palegoldenrod;
		padding: 12px 12px;
		letter-spacing: 1px;
		font-size: 18px;
	}

	.food-list {
		padding: 14px 12px;
		margin-top: 6px;

		h4 {
			font-size: 20px;
		}

		.list {
			width: 100%;


			ul {
				list-style: none;
				padding: 0;
				margin: 0;
				width: 100%;

				li {
					width: 100%;
					// background-color: palegreen;
					display: flex;
					justify-content: space-between;
					margin: 12px 0px;

					span {
						color: #50969f;
						font-size: 18px;
					}

					span.note {
						color: black;
					}
				}
			}
		}
	}

	.step-box {
		width: 100%;
		padding: 0 12px;
		font-size: 20px;
		margin-top: 10px;

		.icon {
			margin-top: 18px;

			.step {
				font-size: 16px;
				font-weight: bold;
				letter-spacing: 1px;
				// margin-top: 10px;

				span {
					font-size: 14px;
				}
			}
			
			.thumb{
				margin-top: 10px;
				border-radius: 10px;
				width: 350px;
				height: 300px;
				
				image{
					border-radius: 10px;
					width: 100%;
					height: 100%;
				}
			}
			
			.content{
				font-size: 18px;
				line-height: 30px;
				letter-spacing: 1px;
				margin-top: 8px;
				padding-right: 18px;
				// background-color: palegoldenrod;
			}
		}
	}
	
	.time{
		padding: 12px;
		font-size: 15px;
		color: #a7a7a7;
	}
	
	.send-box{
		padding: 12px;
		margin-top: 10px;
		
		.send-btn{
			width: 350px;
			height: 50px;
			border-radius: 30px;
			background-color: #ffc533;
			line-height: 50px;
			
			.send-icon{
				width: 26px;
				height: 22px;
				// background-color: palegreen;
				float: left;
				margin-left: 130px;
				margin-top: 6px;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			
			span{
				margin-left: 10px;
				font-size: 17px;
			}
			
		}
	}
	
</style>